<template>
    <div>
        <table class="table">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>
                        {{ data.SID }}
                    </th>
                </tr>
                <tr>
                    <th>卡券名称</th>
                    <th>
                        <input type="text" v-model="data.SName">
                    </th>
                </tr>
                <tr>
                    <th>图片</th>
                    <th>
                        <input type="file" @change="AddTu">
                        <img :src="'https://localhost:7158'+data.STP" style="width: 100px;height: 100px;">
                    </th>
                </tr>
                <tr>
                    <th>卡券类型</th>
                    <th>
                        <select v-model="data.KLX">
                            <option value="0">请选择</option>
                            <option v-for="K in Ka" :value="K.KID">{{ K.KName }}</option>
                        </select>        
                    </th>
                </tr>
                <tr>
                    <th>通用范围</th>
                    <th>
                        <select v-model="data.MLX">
                            <option value="0">请选择</option>
                            <option v-for="m in Men" :value="m.MID">{{ m.MName }}</option>
                        </select>
                    </th>
                </tr>
                <tr>
                    <th>适用日期</th>
                    <th>
                        <span v-for="d in hb">
                            <input v-model="hbfx" type="checkbox" :value="d">{{ d }}
                        </span>
                    </th>
                </tr>
                <tr>
                    <th>有效期</th>
                    <th>
                        <input type="text" v-model="data.SYX">
                    </th>
                </tr>
                <tr>
                    <th>价格</th>
                    <th>
                        <input type="text" v-model="data.SJG">
                    </th>
                </tr>
                <tr>
                    <th>排序</th>
                    <th>
                        <input type="text" v-model="data.PX">
                    </th>
                </tr>
                <tr>
                    <th>连表状态</th>
                    <th>
                        <select v-model="data.ZLX">
                            <option value="0">请选择</option>
                            <option v-for="Z in ZT" :value="Z.ZID">{{ Z.ZName }}</option>
                        </select>
                    </th>
                </tr>
                <tr>
                    <th>状态</th>
                    <th>
                        <input type="checkbox" v-model="data.SZT">选择启用,不选禁用
                    </th>
                </tr>
                <tr>
                    <th></th>
                    <th>
                        <input type="button" value="修改" @click="Update()">
                    </th>
                </tr>
            </thead>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRoute } from 'vue-router';

onMounted(()=>{
    Fan();
    MShow();
    KShow();
    ZShow();

})
const hbfx=ref([]);
const hb=ref(["周一","周二","周三","周四","周五","周六","周日"])

const data =ref({
  "SID": 1,
  "SName": "暑假套餐",
  "STP": "/Img/a9442b1e-c25d-4a4b-8f86-d7146106d3fd00516d6d471e23f1c0f5ccf627111136.jpg",
  "KLX": 3,
  "MLX": 1,
  "SRQ": "周一,周二",
  "SYX": "暑假",
  "SJG": "200",
  "PX": "1",
  "ZLX": 1,
  "SZT": true,
  "Isdel": true
})

const Men=ref([{
    "MID": 1,
    "MName": "门店1"
}])

const Ka=ref([{
    "KID": 1,
    "KName": "小时卡"
}])
const ZT=ref([{
    "ZID": 1,
    "ZName": "上架"
}])

const MShow=()=>{
    axios.get("https://localhost:7158/api/Suo/GetM").then(res=>{
        Men.value=res.data
    })
}

const KShow=()=>{
    axios.get("https://localhost:7158/api/Suo/GetK").then(res=>{
        Ka.value=res.data
    })
}
const ZShow=()=>{
    axios.get("https://localhost:7158/api/Suo/GetZ").then(res=>{
        ZT.value=res.data
    })
}

const router=useRoute();
const Fan=()=>{
    axios.get("https://localhost:7158/api/Suo/GetFan",{params:{SID:router.query.SID}}).then(res=>{
        data.value=res.data;
        hbfx.value=data.value.SRQ.split(',');
    })
}

const Update=()=>{
    data.value.SRQ=hb.value.toString();
    axios.post("https://localhost:7158/api/Suo/Update",data.value).then(res=>{
        if(res.data>0){
            alert("修改成功");
            location.href="/";
        }else{
            alert("修改失败")
        }
    })
}

const AddTu=(e:any)=>{
    var f= e.target.files[0];
    var fs= new FormData();
    fs.append('file',f)

    if(f.size>1024*1024*1){
        alert("图片不能超过1M");
        return;
    }
    if(f.type!="image/jpeg"&&f.type!="image/png")
    {
        alert("图片格式只能是jpg和png");
        return;
    }
    axios.post("https://localhost:7158/api/File/files",fs).then(res=>{
        data.value.STP=res.data
    })
}


</script>

<style scoped>

</style>